{% extends "front/front_base.html" %}

{% block title %}
    {{ post.title }} - 汇智论坛
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='lib/highlight/styles/github-dark.min.css') }}">
    <script src="{{ url_for('static', filename='lib/highlight/highlight.min.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/post_detail.css') }}">
    <script src="{{ url_for('static', filename='front/js/post_detail.js') }}"></script>
{% endblock %}

{% block body %}
    <div class="post-container">
        <h2>{{ post.title }}</h2>
        <p class="post-info-group">
            <span>发表时间：{{ post.create_time }}</span>
            <span>作者：{{ post.author.username }}</span>
            <span>所属板块：{{ post.board.name }}</span>
            <span>评论数：{{ comment_count }}</span>
            <span>点赞数：{{ post.likes_num }}</span>
        </p>
        <div class="post-content">
            {{ post.content|safe }}
        </div>
        <span class="like-group" id="like-container" data-post-id="{{ post.id }}" data-user-id="{{ g.user.id if g.user else '' }}">
            <img src="{{ load_static_file("front/images/like.png") }}"
                 class="like-icon  {% if g.user and like_status[0] == 1 %}liked{% endif%}"
                 id="like"
                 style="width: 24px; height: 24px; cursor: pointer;"
                 title="点赞">
            <span class="like-count">{{ post.likes_num|default(0) }}</span>
        </span>
    </div>
    <div class="comment-group">
        <h3>评论列表</h3>
        <ul class="comment-list-group">
            {% for comment in post.comments %}
                <li>
                    <div class="avatar-group">
                        <img src="{{ url_for('media.get_avatar', filename=comment.author.avatar) }}" alt="">
                    </div>
                    <div class="comment-content">
                        <p class="author-info">
                            <span>{{ comment.author.username }}</span>
                            <span>{{ comment.create_time }}</span>
                        </p>
                        <p class="comment-txt">
                            {{ comment.content }}
                        </p>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="add-comment-group">
        <h3>发表评论</h3>
        <textarea name="comment" id="comment-textarea" style="width: 100%; resize:vertical;"></textarea>
        <div class="comment-btn-group">
            <button class="btn btn-primary" id="comment-btn" data-post-id="{{ post.id }}"
                    data-user-id="{{ user.id if user else '' }}">发表评论
            </button>
        </div>
    </div>
{% endblock %}